import React, { Component, Fragment } from "react";
// antd
import { Tag, Tabs } from "antd";
// table 组件
import TableComponent from "@c/tableData/Index";
// api
import http from '../../utils/request';
// charts
import AccountType from "./charts/account";

const { TabPane } = Tabs;

class OaHistoryList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // echarts
            oa_record_count: '',
            oa_record_total: '',
            robot_record_count: '',
            robot_record_total: '',
            robot_record_type: {},
            robot_record_curve: [],
            // id
            id: "",
            // flag
            flag: false,
            // 请求参数
            pageNumber: 1,
            pageSize: 10,
            keyWork: "",
            // 表头
            tableConfig_oa: {
                url: "oaHistoryList",
                method: "get",
                checkbox: true,
                thead: [
                    { title: "姓名", dataIndex: "nickname", key: "nickname" },
                    { title: "用户id", dataIndex: "user_id", key: "user_id" },
                    { title: "申请类型", dataIndex: "module_name", key: "module_name" },
                    { title: "通过时间", dataIndex: "pass_time", key: "pass_time" },
                    { title: "表单数据", dataIndex: "form_data", key: "form_data" },
                    { 
                        title: "状态", 
                        dataIndex: "status_code", 
                        key: "status_code",
                        render: (rowData => {
                        return (
                            <div>
                                <Tag color={rowData === "200" ? 'red' : 'geekblue'} key={rowData}>
                                    {rowData === "200" ? "失败" : "通过"}
                                </Tag>
                            </div>
                        )
                        })
                    },
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "申请信息", 
                        name: "request_data__contains",
                        style: { width: "150px" }, 
                        placeholder: "请输入申请信息模糊搜索"
                    }
                ],
                formSearchCol: 18,
                formRightCol: 6,
            },
            tableConfig_robot: {
                url: "robotHistoryList",
                method: "get",
                checkbox: true,
                thead: [
                    { title: "姓名", dataIndex: "caller", key: "caller" },
                    { 
                        title: "会话信息", 
                        key: "chat_type",
                        render: (text, rowData) => {
                            console.log(rowData)
                            return (
                                <div>
                                    {rowData.chat_type === 1 ? '单聊' : '群聊'}
                                    <br></br>
                                    {rowData.groupchat_title ? '《' + rowData.groupchat_title + '》' : ''}
                                </div>
                            )
                        }
                    },
                    { title: "发起时间", dataIndex: "send_time", key: "send_time" },
                    { title: "回复时间", dataIndex: "reply_time", key: "reply_time" },
                    { title: "会话类型", dataIndex: "instruction_type", key: "instruction_type" },
                    { title: "发送内容", dataIndex: "msg_content", key: "msg_content", ellipsis: true },
                    { title: "回复类型", dataIndex: "msg_type", key: "msg_type" },
                    { title: "回复内容", dataIndex: "reply_content", key: "reply_content", ellipsis: true },
                    { 
                        title: "命中", 
                        dataIndex: "hit_status", 
                        key: "hit_status",
                        render: (rowData => {
                        return (
                            <div>
                                <Tag color={rowData === false ? 'red' : 'geekblue'} key={rowData}>
                                    {rowData.toString()}
                                </Tag>
                            </div>
                        )
                        })
                    },
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "姓名", 
                        name: "caller__contains",
                        style: { width: "150px" }, 
                        placeholder: "请输入姓名"
                    },
                    { 
                        type: "Input",
                        label: "发送内容", 
                        name: "msg_content__contains",
                        style: { width: "200px" },
                        placeholder: "请输入发送内容"
                    },
                    { 
                        type: "Input",
                        label: "回复内容", 
                        name: "reply_content__contains",
                        style: { width: "200px" },
                        placeholder: "请输入回复内容"
                    },
                ],
                formSearchCol: 18,
                formRightCol: 6,
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){
        this.onHandleFetchOaData();
        this.onHandleFetchRobotData();
    }

    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }
    
    // 获取后台接口数据
    onHandleFetchOaData = () => {
        http.get('/ding/history/type')
        .then(response => {
            const type_info = response.data.data;
            const oa_total = response.data.total;
            console.log(response)
            this.setState({ oa_record_count: type_info, oa_record_total: oa_total });
        })
    }
    onHandleFetchRobotData = () => {
        http.get('/robot/history/type')
        .then(response => {
            const type_info = response.data.data;
            const robot_total = response.data.total;
            const robot_type = response.data.robot_type;
            const robot_curve = response.data.robot_curve;
            console.log(response)
            this.setState({ 
                robot_record_count: type_info, 
                robot_record_total: robot_total,
                robot_record_type: robot_type,
                robot_record_curve: robot_curve
            });
        })
    }

    render(){
        const { oa_record_count, oa_record_total, robot_record_total, robot_record_count, robot_record_type, robot_record_curve } = this.state;
        return (
            <Fragment>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="统计图表" key="1">
                        <AccountType 
                            chartProps={oa_record_count} 
                            chartProps_robot={robot_record_count}
                            os_today_number={oa_record_total} 
                            robot_today_number={robot_record_total}
                            robot_record_type={robot_record_type}
                            robot_record_curve={robot_record_curve}
                        />
                    </TabPane>
                    <TabPane tab="OA申请记录" key="2">
                        <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig_oa} />
                    </TabPane>
                    <TabPane tab="Robot调用记录" key="3">
                        <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig_robot} />
                    </TabPane>
                </Tabs>
            </Fragment>
        )
    }
}

export default OaHistoryList;